/**
BEM-block element modifier（块，元素和修饰符）

命名规则block--modifier-value
.block{}
.block__element{}
.block--modifier{}

BEM方法可确保参与网站开发的每个人都使用单一代码库，并且使用相同的语言。
它有助于开发可扩展、可复用的接口组件。

【Block 块】
（块，并不是平常说的块级元素中的块，而是指模块、组件）
封装一个独立的有意义的独立实体。虽然块可以嵌套并且可以相互交互，
但是从语义上讲，它们保持相等。没有优先级或层次结构。
没有DOM表示的整体实体（例如控制器或模型）也可以是块。

Block 是一个逻辑上和功能上独立的页面组件，
等同于网页组件中的部件（等同于网页中的组件）。
Block 封装了行为（Javascript）、模板、样式（CSS）和其他实现技术。
独立状态的 Block 可供复用，并且促进项目开发和维护。

作者：咚门
链接：https://www.jianshu.com/p/aa51cd46804c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

命名
块名称可以由拉丁字母，数字和破折号组成。要形成CSS类，
请为命名空间添加一个简短的前缀：.block

html:
如果任何DOM节点接受类名，则可以是一个块
<div class =“ block”> ... </ div>

css:
仅使用类别名称选择器
没有标签名称或ID
不依赖页面上的其他块/元素
.block {color：＃042; }



----------------------------------------------------------------------------------

【Element（元素 ）】
块的一部分，没有独立的含义。任何元素在语义上都与其块相关。
命名
元素名称可以包含拉丁字母，数字，破折号和下划线。
CSS类由块名称，两个下划线和元素名称组成：.block__elem

html:
块中的任何DOM节点都可以是元素。在给定的块中，所有元素在语义上都是相等的。
<div class =“ block”>
	  ...
	  <span class =“ block__elem”> </ span>
</ div>

CSS:
仅使用类别名称选择器
没有标签名称或ID
不依赖页面上的其他块/元素

推荐：
.block__elem {color：＃042; }

不推荐：
.block .block__elem {color：＃042; }
	div.block__elem {color：＃042; }



----------------------------------------------------------------------------------

【Modifier（修饰符 ）】
块或元素上的标志。使用它们可以更改外观，行为或状态。

Modifier 可用也可不用（即不一定要用到 modifier）。

命名
修饰符名称可以包含拉丁字母，数字，破折号和下划线。
CSS类形成为块的或元素的名称加上两个破折号：
.block--mod 或 .block__elem--mod
和.block--color-black 与.block--color-red。
复杂修饰符中的空格由破折号代替。


html:
修饰符是一个额外的类名称，您可以将其添加到块/元素DOM节点中。
仅将修饰符类添加到它们修改的块/元素中，并保留原始类：

推荐：
<div class =“ block block--mod”> ... </ div>
	<div class =“ block block--size-big
		block--shadow-yes”> ... </ div>

不推荐
<div class =“ block--mod”> ... </ div>

css
使用修饰符类名称作为选择器：
.block--hidden { }

要基于块级修饰符更改元素：
.block--mod .block__elem { }

元素修饰符：
.block__elem--mod { }



----------------------------------------------------------------------------------



【案例】
block  form with modifiers theme: "xmas" and simple: true
elements input
element submit with its own modifier disabled: true

html:
<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>


css:
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }




 */
